import PropTypes from 'prop-types'
import React, { memo, useEffect, useRef, useState } from 'react'
import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent, } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

import { ChartBaseBarWarpper } from './style'
import { isArrayWithLength, calcZoomAndScale } from "@/utils"

echarts.use([GridComponent, BarChart, CanvasRenderer, TooltipComponent,]);
const ChartBaseBar = memo((props) => {
    const { data = [], params = {}, height = "120px" } = props

    const elRef = useRef()
    const [zoom, setZoom] = useState()
    const [scale, setScale] = useState()
    const [timer, setTimer] = useState()
    let startIndex = 0, endIndex = 7

    useEffect(() => {
        let myChart = echarts.init(elRef.current);
        function run() {
            if (endIndex > data.length - 1) {
                startIndex = 0
                endIndex = 7
            }
            else {
                startIndex = startIndex + 1
                endIndex = endIndex + 1
            }
            const { dataAxis, dataYxis } = getData()
            const option = {
                xAxis: {
                    data: dataAxis,
                },
                series: [
                    {
                        data: dataYxis
                    }
                ]
            };
            option && myChart.setOption(option);
        }

        function getData() {
            if (data.length > 7) {
                let sliceData = data.slice(startIndex, endIndex)
                const dataAxis = sliceData.map(item => item.label)
                const dataYxis = sliceData.map(item => item.value)
                return { dataAxis, dataYxis }
            }
            else if (data.length <= 7) {
                const dataAxis = data.map(item => item.label)
                const dataYxis = data.map(item => item.value)
                return { dataAxis, dataYxis }
            } else {
                return { dataAxis: [], dataYxis: [] }
            }
        }

        function chartResize() {
            const { _zoom, _scale } = calcZoomAndScale()
            setScale(_scale)
            setZoom(_zoom)
        }
        function initChart() {
            if (!isArrayWithLength(data)) return
            const { dataAxis, dataYxis } = getData()
            const option = {
                xAxis: {
                    data: dataAxis,
                    axisLabel: {
                        fontSize: 18,
                        color: '#fff'
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '2%',
                    top: '5%',
                    containLabel: true
                },
                yAxis: {
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        fontSize: 20,
                        color: '#fff'
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            dashOffset: 16,
                            color: "#3F4B67"
                        }
                    }
                },
                series: [
                    {
                        type: 'bar',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: params.startColor || '#458CFF' },
                                { offset: 1, color: params.endColor || '#1F3659' }
                            ]),
                            borderRadius: [8, 8, 0, 0],

                        },
                        barWidth: '24px',
                        data: dataYxis
                    }
                ]
            };
            option && myChart.setOption(option);
            chartResize()
        }
        initChart()
        window.addEventListener("resize", chartResize)
        if (data.length > 7) {
            const timer = setInterval(() => {
                run()
            }, 2000);
            setTimer(timer)
        }

        return () => {
            console.log("chart-base-bar:清除副作用")
            window.removeEventListener("resize", chartResize)
            timer && clearInterval(timer)
        }
    }, [])

    return (
        <ChartBaseBarWarpper height={height}>
            <div ref={elRef} className="chart-basebar-container" style={{ zoom: zoom, transform: "scale(" + scale + ")", transformOrigin: '0 0' }}></div>
        </ChartBaseBarWarpper >
    )
})

ChartBaseBar.propTypes = {
    height: PropTypes.string,
    params: PropTypes.object,
    data: PropTypes.array
}

export default ChartBaseBar